<template>
  <div id="browse">
  </div>
</template>

<script>
import echarts from 'echarts'
import waldenProject from './walden.project'

export default {
  props: {
    dataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  name: 'Browse',
  data () {
    return {
      signList: [],
      visitorList: [],
      timeList: []
    }
  },
  mounted() {
    this.init()
  },
  created () {
    const _this = this
    this.dataList.forEach(item => {
      _this.signList.push(item.signNum)
      _this.visitorList.push(item.visitorNum)
      _this.timeList.push(item.nowTime)
    })
  },
  methods: {
    init() {
      const myChart = echarts.init(document.getElementById('browse'), waldenProject.theme)
      // 指定图表的配置项和数据
      const option = {
        tooltip: {},
        legend: {
          left: 'center',
          top: 'top',
          data: ['浏览', '报名']
        },

        xAxis: {
          show: false,
          data: this.timeList
        },
        yAxis: {
          show: false
        },
        grid: {
          x: -60,
          y: 30,
          x2: -60,
          y2: -60
        },
        series: [
          {
            name: '浏览',
            type: 'line',
            areaStyle: {},
            lineGap: 0,
            data: this.visitorList
          },
          {
            name: '报名',
            type: 'line',
            areaStyle: {},
            lineGap: 0,
            data: this.signList
          }
        ]
        // series: [
        //   {
        //     name: '浏览量',
        //     type: 'bar',
        //     barGap: 0,
        //     data: [320, 332, 301, 334, 390, 334, 390]
        //   },
        //   {
        //     name: '购买量',
        //     type: 'bar',
        //     data: [220, 182, 191, 234, 290, 334, 390]
        //   }
        // ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

      window.addEventListener('resize', () => myChart.resize())
    }
  }
}
</script>

<style  scoped>
#browse {
  width: 100%;
  min-height: 216px;
  position: relative;
  /* bottom: -48px; */
}
</style>
